<template>
  <div class="personal">
    <!-- 头部 -->
    <div class="top_box">
      <router-link to="/home">
        <div class="logo">菜篮子</div>
      </router-link>

      <div class="car_box">个人中心</div>
      <div class="right_top">
        <!-- 首页 -->
        <router-link to="/home">
          <div class="home">
            <span class="iconfont icon-shouye-shouye"></span>首页
          </div>
        </router-link>
        <!-- 购物车 -->
        <router-link to="/shoppingcar">
          <div class="car">
            <span class="iconfont icon-gouwuche1"></span>
            购物车
          </div>
        </router-link>
      </div>
    </div>

    <div class="container">
      <div class="personal_box">
        <div class="left">
          <div class="tuobox" v-if="userLogin">
            <div class="tou">
              <img :src="userLogin.headshot" alt="" />
            </div>

            <div class="name">
              {{ userLogin.name }}<span>Lv{{ userLogin.Lv }}</span>
            </div>
          </div>
          <ul class="left_ul">
            <li @click="index = 0" :class="{ con: index == 0 }">
              我的收藏<span
                class="iconfont icon-daohangshoucangyishoucang"
              ></span>
            </li>
            <li @click="index = 1" :class="{ con: index == 1 }">
              我的订单<span class="iconfont icon-quanbudingdan"></span>
            </li>

            <li @click="index = 2" :class="{ con: index == 2 }">
              收货地址<span class="iconfont icon-shouhuodizhi"></span>
            </li>
          </ul>
        </div>
        <div class="right">
          <div class="right_show">
            <!-- 我的收藏 -->
            <div class="collection" v-if="index == 0">
              <div class="top_nav">收藏中心</div>
              <div
                class="collection_bar"
                v-for="(item, index) in commodity"
                :key="index"
              >
                <div class="collection_box">
                  <div class="index">{{ index + 1 }}</div>
                  <router-link
                    tag="div"
                    class="coll_img"
                    :to="'/detailpage?id=' + item.homeId"
                  >
                    <img :src="item.bigImg" alt="" />
                  </router-link>
                  <div class="title">
                    {{ item.description }}
                  </div>
                  <div class="btn_box">
                    <button>加入购物车</button>
                    <button class="del" @click="del(item.homeId)">删除</button>
                  </div>
                </div>
              </div>

              <div v-if="!commodity" class="nolike">
                <div class="no-pic">
                  <img
                    src="//img.alicdn.com/tps/i2/TB16ztmHFXXXXX7XFXXIrnAJFXX-89-89.png"
                  />
                </div>
                <router-link tag="p" to="/home"
                  >你还没有收藏商品
                  <br />去随便逛逛吧，看看有没有喜欢的</router-link
                >
              </div>
            </div>

            <!-- 订单 -->
            <el-tabs type="border-card" v-if="index == 1">
              <!-- 全部订单 -->
              <el-tab-pane>
                <span slot="label"
                  >全部订单<span
                    class="iconfont icon-quanbudingdan"
                    style="font-size: 20px; padding-left: 4px"
                  >
                  </span
                ></span>
                <ul class="carttitle">
                  <li>商品图</li>
                  <li>订单信息</li>
                  <li style="margin-left: 46px">订单状态</li>
                </ul>
                <div
                  v-if="ShopcarNum == null"
                  style="
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    margin-top: 85px;
                  "
                >
                  <div class="no-dd">
                    <img
                      src="//img.alicdn.com/tps/i2/TB16ztmHFXXXXX7XFXXIrnAJFXX-89-89.png"
                    />
                  </div>
                  <p style="color: #ad0002; font-size: 20px; font-weight: 600">
                    您还没有购买商品，快去购买吧！
                  </p>
                </div>
                <div v-for="(item, index) in ShopcarNum" :key="index">
                  <div v-if="item.completed" class="all_paid">
                    <div class="all_message">
                      <div class="all_img">
                        <router-link
                          :to="'/detailpage?id=' + item.homeId"
                          tag="img"
                          :src="item.bigImg"
                          alt=""
                        ></router-link>
                      </div>
                      <div class="message_title">
                        <p class="message_name" :title="item.description">
                          {{ item.description }}
                        </p>
                        <p>{{ item.BigImgprice }} * {{ item.num }}</p>
                      </div>
                      <div class="state" v-if="item.a">待收货...</div>
                      <div class="state" v-if="!item.a">待支付...</div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <!-- 待支付 -->
              <el-tab-pane label="待支付">
                <ul class="carttitle">
                  <li>商品图</li>
                  <li>订单信息</li>
                  <li style="margin-left: 46px">订单状态</li>
                </ul>
                <div v-for="(item, index) in quxiaoList" :key="index">
                  <div class="all_paid">
                    <div class="all_message">
                      <div class="all_img">
                        <router-link
                          :to="'/detailpage?id=' + item.homeId"
                          tag="img"
                          :src="item.bigImg"
                          alt=""
                        ></router-link>
                      </div>
                      <div class="message_title">
                        <p class="message_name" :title="item.description">
                          {{ item.description }}
                        </p>
                        <p>{{ item.BigImgprice }} * {{ item.num }}</p>
                      </div>
                      <div class="state">待支付...</div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>

              <!-- 待收货 -->
              <el-tab-pane>
                <ul class="carttitle">
                  <li>商品图</li>
                  <li>订单信息</li>
                  <li style="margin-left: 46px">订单状态</li>
                </ul>
                <div
                  v-if="!ShopcarNum"
                  style="
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    margin-top: 85px;
                  "
                >
                  <div class="no-dd">
                    <img
                      src="//img.alicdn.com/tps/i2/TB16ztmHFXXXXX7XFXXIrnAJFXX-89-89.png"
                    />
                  </div>
                  <p style="color: #ad0002; font-size: 20px; font-weight: 600">
                    您还没有购买商品，快去购买吧！
                  </p>
                </div>
                <span slot="label"
                  >待收货<span
                    class="iconfont icon-daifahuo"
                    style="font-size: 20px; padding-left: 4px"
                  ></span
                ></span>
                <div v-for="(item, index) in ShopcarNum" :key="index">
                  <div class="all_paid" v-if="item.completed">
                    <div class="all_message">
                      <div class="all_img">
                        <router-link
                          :to="'/detailpage?id=' + item.homeId"
                          tag="img"
                          :src="item.bigImg"
                          alt=""
                        ></router-link>
                      </div>
                      <div class="message_title">
                        <p class="message_name" :title="item.description">
                          {{ item.description }}
                        </p>
                        <p>{{ item.BigImgprice }} * {{ item.num }}</p>
                      </div>
                      <div class="state">待收货...</div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>

            <!-- 设置 收货地址 -->
            <ul class="set_up" v-if="index == 2">
              <li>
                <div class="set_address">
                  <div class="container">
                    <h3>选择收货地址</h3>
                    <div class="address_box">
                      <div class="frame cons">
                        <div class="fra_btn">
                          <span
                            class="iconfont fra_shou icon-shouhuodizhi"
                          ></span>
                          <el-button
                            type="text"
                            class="el-btn"
                            @click="dialogFormVisible = true"
                            >添加地址</el-button
                          >
                        </div>
                      </div>
                      <div
                        class="frame"
                        :class="{ cons: curr == index }"
                        v-for="(item, index) in lists"
                        :key="index"
                      >
                        <div class="top">
                          <p class="add_name">{{ item.name }}</p>
                          <div
                            class="address_del"
                            @click="address_del(item.id)"
                          >
                            <img src="../assets/img/10073.png" />
                          </div>
                          <el-button
                            custom-class="buts"
                            type="text"
                            @click="xiugai(item.id)"
                            >修改地址</el-button
                          >
                          <!-- 修改地址 -->
                          <el-dialog
                            title="修改地址"
                            :visible.sync="centerDialogVisible"
                            width="30%"
                            center
                          >
                            <el-form :model="form">
                              <el-form-item
                                label="姓名"
                                :label-width="formLabelWidth"
                              >
                                <el-input
                                  v-model="name"
                                  autocomplete="off"
                                ></el-input>
                              </el-form-item>
                              <el-form-item
                                label="地区"
                                :label-width="formLabelWidth"
                              >
                                <el-input v-model="address"> </el-input>
                              </el-form-item>
                              <el-form-item
                                label="详细地址"
                                :label-width="formLabelWidth"
                              >
                                <el-input v-model="page"> </el-input>
                              </el-form-item>
                              <el-form-item
                                label="手机号码"
                                :label-width="formLabelWidth"
                              >
                                <el-input v-model="phone"> </el-input>
                              </el-form-item>
                            </el-form>
                            <span slot="footer" class="dialog-footer">
                              <el-button @click="centerDialogVisible = false"
                                >取 消</el-button
                              >
                              <el-button type="primary" @click="editBtn"
                                >确 定</el-button
                              >
                            </span>
                          </el-dialog>
                        </div>
                        <p @click="color(item.id)">
                          {{ item.address }}{{ item.page }}
                        </p>
                        <p>
                          {{ item.phone }}
                        </p>
                      </div>
                    </div>
                    <div class="xiugai">
                      <el-dialog
                        title="收货地址"
                        :visible.sync="dialogFormVisible"
                      >
                        <el-form :model="form">
                          <el-form-item
                            label="姓名"
                            :label-width="formLabelWidth"
                          >
                            <el-input
                              v-model="name"
                              autocomplete="off"
                            ></el-input>
                          </el-form-item>
                          <el-form-item
                            label="地区"
                            :label-width="formLabelWidth"
                          >
                            <el-input v-model="address"> </el-input>
                          </el-form-item>
                          <el-form-item
                            label="详细地址"
                            :label-width="formLabelWidth"
                          >
                            <el-input v-model="page"> </el-input>
                          </el-form-item>
                          <el-form-item
                            label="手机号码"
                            :label-width="formLabelWidth"
                          >
                            <el-input v-model="phone"> </el-input>
                          </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                          <el-button @click="dialogFormVisible = false"
                            >取 消</el-button
                          >
                          <el-button type="primary" @click="add"
                            >确 定</el-button
                          >
                        </div>
                      </el-dialog>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 页脚 -->
    <footerpage></footerpage>
  </div>
</template>
<script>
import footerpage from "../components/FooterPage.vue";
import { getHomeMian } from "../api/home.js";
import { getLoginCellphone } from "../api/login.js";

export default {
  data() {
    return {
      lists: [
        {
          id: 1,
          address: "广东广州",
          name: "林某某",
          phone: 13421722866,
          page: "从化区粤嵌",
          flag: false,
        },
        {
          id: 2,
          address: "广东广州",
          name: "林锦桦",
          phone: 13421722866,
          page: "从化区粤嵌",
          flag: false,
        },
      ],
      activeName: "first",
      flag: false,
      index: 0, //侧边栏切换

      // 收藏,
      home: null,
      commodity: null,
      collNum: 0,

      ShopcarNum: null,
      // 登录
      userLogin: null,
      goodsList: [],

      dialogTableVisible: false,
      dialogFormVisible: false,
      dia: false,
      form: {
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
      curr: 0,
      name: "",
      page: "",
      phone: "",
      address: "",
      editId: null, //修改值
      centerDialogVisible: false,
      tianjia: [], //添加数据
      bottom: null, //选中数据
      quxiaoList: [], //取消数据
      jiesuanList: [], //结算数据
      Arr: [],
    };
  },
  methods: {
    getHomeMianFun() {
      getHomeMian().then((data) => {
        this.home = data.homeMain;
      });
    },
    getLoginCellphoneFun() {
      getLoginCellphone().then((data) => {
        this.userLogin = data.login[0];
      });
    },

    // 删除收藏
    del(id) {
      let index = this.commodity.findIndex((item) => item.homeId == id);
      console.log(index);
      this.commodity.splice(index, 1);
      localStorage.setItem("shoucang", JSON.stringify(this.commodity));
    },
    //选中按钮
    color(id) {
      let index = this.lists.findIndex((item) => item.id == id);
      this.curr = index;
      this.tianjia = this.lists[index];
      window.localStorage.setItem("xuan", JSON.stringify(this.tianjia));
    },
    //添加地址
    add() {
      this.dialogFormVisible = false;
      const id = this.lists.length + 1;

      this.lists.push({
        id: id,
        name: this.name,
        address: this.address,
        page: this.page,
        phone: this.phone,
      });
      this.name = this.address = this.page = this.phone = "";
      window.localStorage.setItem("tianjia", JSON.stringify(this.lists));
    },
    address_del(id) {
      let addIndex = this.lists.findIndex((item) => item.id == id);
      console.log(this.lists);
      console.log(addIndex);
      this.lists.splice(addIndex, 1);
      window.localStorage.setItem("tianjia", JSON.stringify(this.lists));
    },
    //修改地址
    xiugai(id) {
      this.centerDialogVisible = true;
      let index = this.lists.findIndex((item) => item.id == id);
      let { name, address, page, phone } = this.lists[index];
      this.name = name;
      this.address = address;
      this.page = page;
      // let phone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      this.phone = phone;
      // console.log(this.phone);
      this.editId = index;
    },
    //修改完成
    editBtn() {
      this.centerDialogVisible = false;
      // let index = this.lists.findIndex(item => item.id == id);
      this.lists[this.editId].name = this.name;
      this.lists[this.editId].address = this.address;
      this.lists[this.editId].page = this.page;
      this.lists[this.editId].phone = this.phone;

      this.name = this.address = this.page = this.phone = "";
      window.localStorage.setItem("tianjia", JSON.stringify(this.lists));
    },

    button_ok() {
      this.$message({
        showClose: true,
        message: "支付成功",
        type: "success",
      });
      // let okIndex = this.goodsList.findIndex((item) => item.homeId == id);
    },
    button_del(id) {
      this.$message({
        showClose: true,
        message: "已删除",
      });
      let delIndex = this.goodsList.findIndex((item) => item.homeId == id);
      // console.log(this.goodsList);
      // console.log(delIndex);
      this.goodsList.splice(delIndex, 1);
      localStorage.setItem("shoucang", JSON.stringify(this.goodsList));
    },
  },
  watch: {
    curr: function () {
      this.bottom = JSON.parse(localStorage.getItem("xuan"));
    },
  },
  created() {
    // 收藏
    if (localStorage.shoucang) {
      this.commodity = JSON.parse(localStorage.getItem("shoucang"));
    }

    // 取消支付
    if (localStorage.quxiao) {
      this.quxiaoList = JSON.parse(localStorage.getItem("quxiao"));
    }

    // 取加入购物车的数据
    if (localStorage.jiesuan) {
      this.ShopcarNum = JSON.parse(localStorage.getItem("jiesuan"));
      console.log(this.Arr);
      // this.Arr = this.ShopcarNum;
      // this.Arr.push(...this.quxiaoList)
    }

    //地址
    if (localStorage.tianjia) {
      this.lists = JSON.parse(localStorage.getItem("tianjia"));
    }
    if (localStorage.xuan) {
      this.bottom = JSON.parse(localStorage.getItem("xuan"));
    }

    this.getHomeMianFun();
    this.getLoginCellphoneFun();
  },
  mounted() {},
  components: {
    footerpage,
  },
};
</script>
<style lang="scss" scoped>
.personal {
  padding-bottom: 20px;
  // background: linear-gradient(180deg,  rgb(252 252 252 / 0%),#9e9e9e);
  background: #fff;
  .top_box {
    width: 100%;
    background-color: #ad0002;
    display: flex;
    height: 70px;
    align-items: center;
    justify-content: space-around;
    .logo {
      font-family: "font";
      font-weight: 700;
      font-size: 65px;
      color: #fff;
      transform: rotateZ(355deg);
      position: relative;
      img {
        position: absolute;
        top: 44px;
        right: 1px;
        width: 20px;
        height: 20px;
        border-radius: 7px;
      }
    }
    .car_box {
      margin: 0 170px;
      font-size: 35px;
      color: #fff;
      font-family: "font";
      font-weight: 700;
    }
    .right_top {
      display: flex;
      .home {
        color: #fff;
        font-size: 17px;
        padding-right: 70px;

        .icon-shouye-shouye {
          padding-right: 5px;
          font-size: 20px;
        }
      }
      .car {
        color: #fff;
        font-size: 17px;
        padding-right: 70px;

        .icon-gouwuche1 {
          padding-right: 5px;
          font-size: 20px;
          position: relative;
        }
        .car_num {
          position: absolute;
          top: -4px;
          right: -1px;
          width: 16px;
          border-radius: 50%;
          height: 16px;
          line-height: 17px;
          text-align: center;
          background: rgb(44, 199, 26);
          color: #fff;
          font-size: 12px;
          transform: scale(0.8);
        }
      }
    }
  }
  .give {
    span {
      padding: 5px 0;
    }
    // width: 220px;
    // display: -webkit-box;
    // -webkit-box-orient: vertical;
    // -webkit-line-clamp: 2;
    // overflow: hidden;
    // padding-top: 10px;
  }
  .receipt {
    padding-top: 10px;
  }
  .set_address {
    .el-input__inner {
      width: 90%;
    }

    width: 100%;

    h3 {
      margin-top: 15px;
      margin-bottom: 10px;
    }

    .address_box {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      .frame {
        width: 227px;
        color: #000;
        // height: 123px;
        // height: 95px;
        background: url("https://img.alicdn.com/tps/i2/T1VPiBXvpeXXbjLKQ7-237-106.png");
        background-size: 100% 100%;
        font-size: 15px;
        padding: 10px 18px;
        margin-top: 10px;
        margin-right: 20px;
        position: relative;
        .fra_btn {
          text-align: center;
          display: flex;
          flex-direction: column;
          height: 100%;
          justify-content: center;
          .el-btn {
            padding: 5px 0;
            font-size: 17px;
          }
          .fra_shou {
            font-size: 21px;
          }
        }
        .top {
          border-bottom: 1px solid #eee;
          padding-bottom: 5px;
          .add_name {
            font-size: 17px;
          }
          .address_del {
            position: absolute;
            bottom: 8px;
            right: 8px;
            width: 12px;
            height: 12px;
            cursor: pointer;

            img {
              width: 100%;
              height: 100%;
              display: none;
            }
          }
          .address_del:hover img {
            display: block;
          }
          .el-button--text {
            font-size: 13px;
            position: absolute;
            right: 16px;
            top: 8px;
          }
        }

        p {
          padding: 5px 0;
        }
      }

      .cons {
        background: url("../assets/img/光明/1111.png");
        background-size: 100% 100%;
      }
    }

    .orders {
      margin-top: 20px;

      .orders_top {
        display: flex;
        justify-content: space-between;
        font-size: 13px;
        border-bottom: 2px solid #bfd9ff;
        padding-bottom: 5px;

        .left {
          display: flex;

          p {
            margin-left: 90px;
          }

          span {
            margin-left: 182px;
          }
        }

        .right {
          display: flex;

          p {
            margin-right: 115px;
          }

          .p {
            margin-right: 40px;
          }
        }
      }

      .orders_bottom {
        padding: 10px;
        display: flex;
        font-size: 12px;
        justify-content: space-between;
        background-color: #fbfcff;

        .bot_left {
          display: flex;

          .imges {
            width: 80px;
            height: 80px;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .title {
            width: 160px;
            margin-left: 10px;

            p {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .small_img {
              img {
                margin-right: 5px;
                margin-top: 8px;
              }
            }

            span {
              color: #f6b955;
              margin-top: 8px;
              display: block;
            }
          }

          .color {
            color: #919294;
            margin-left: 10px;

            p {
              margin-bottom: 8px;
            }
          }
        }

        .bot_right {
          display: flex;
          p {
            margin-right: 115px;
          }
          strong {
            font-size: 15px;
            color: #ff0036;
            margin-right: 20px;
          }
          .num {
            margin-right: 132px;
          }
          .many {
            margin-right: 123px;
          }
        }
      }

      .fortune {
        padding: 10px;
        font-size: 12px;
        border-bottom: 2px solid #bfd9ff;
        background-color: #f2f7ff;

        .piao {
          padding: 10px;
          display: flex;
          justify-content: flex-end;

          p {
            margin-right: 140px;
          }

          strong {
            color: #ff0036;
            margin-right: 15px;
          }
        }

        .xian {
          padding: 10px;
          display: flex;
          justify-content: flex-end;

          p {
            margin-right: 95px;

            span {
              color: #fff;
              background-color: #39ad6a;
            }
          }

          strong {
            color: #ff0036;
            margin-right: 15px;
          }
        }

        .total {
          font-size: 14px;
          display: flex;
          justify-content: flex-end;
          margin-right: 15px;
          margin-top: 40px;

          strong {
            color: #ff0036;
          }
        }
      }

      .big_box {
        display: flex;
        flex-direction: column;
        align-items: flex-end;

        .address_two {
          border: 1px solid red;
          width: 415px;
          // height: 110px;

          font-size: 12px;
          margin-top: 50px;

          .money {
            margin-left: 275px;
            margin-top: 15px;

            strong {
              font-size: 20px;
              color: #ff0036;
            }
          }

          .give {
            margin-left: 15px;
            margin-top: 15px;
          }

          .receipt {
            margin: 10px 0 20px 250px;
          }
        }

        .button {
          width: 160px;
          height: 35px;
          font-size: 13px;
          text-align: center;
          line-height: 35px;

          button {
            color: #fff;
            border: none;
            background-color: #ff0036;
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  .personal_box {
    display: flex;
    width: 100%;
    background-color: #fff;
    padding-top: 70px;

    .left {
      width: 20%;
      height: 100%;
      border-right: 1px solid #ddd;
      //   background: skyblue;
      padding: 10px;
      .tuobox {
        width: 100%;
        height: 125px;
        border-bottom: 2px solid #ddd;
        .tou {
          width: 70px;
          height: 70px;
          margin: 0 auto;
          border-radius: 50%;
          cursor: pointer;
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            overflow: hidden;
          }
        }
        .name {
          margin-top: 20px;
          text-align: center;
          font-size: 15px;
          span {
            font-size: 12px;
            transform: scale(0.8);
            display: inline-block;
            padding-left: 5px;
            color: #999;
          }
        }
      }
      .left_ul {
        li {
          .iconfont {
            padding-left: 5px;
          }
          width: 100%;
          //   height: 125px;
          line-height: 100px;
          text-indent: 50px;
          font-size: 18px;
          position: relative;
          cursor: pointer;
          &.con {
            color: #ad0002;
            font-weight: 700;
          }
        }
      }
    }
    .right {
      width: 80%;
      height: 100%;
      padding: 10px 20px;
      .right_show {
        // 我的收藏
        .collection {
          .top_nav {
            width: 100%;
            height: 40px;
            line-height: 40px;
            background-color: #f2f2f2;
            text-align: center;
            font-size: 30px;
            font-family: "font";
            font-weight: 700;
          }
          .nolike {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 300px;
            line-height: 28px;
            text-align: center;
            color: #ad0002;
            font-size: 20px;
            font-weight: 600;
            flex-direction: column;
          }
          .collection_bar {
            .collection_box {
              padding: 20px 0;
              display: flex;
              align-items: center;
              justify-content: space-between;
              border-bottom: #dddddd solid 1px;

              .index {
                width: 20px;
                height: 20px;
                border: 1px solid #000;
                border-radius: 50%;
                text-align: center;
                font-size: 14px;
                line-height: 20px;
                margin-left: 20px;
              }
              .coll_img {
                width: 80px;
                height: 80px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .title {
                width: 220px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
              }
              .btn_box {
                margin-right: 90px;
                button {
                  display: block;
                  width: 80px;
                  padding: 5px 0;
                  background-color: #fff;
                  border: 1px solid #000;
                  cursor: pointer;
                }
                .del {
                  border-top: 0;
                }
              }
            }
          }
        }

        // 设置
        .set_up {
          li {
            .xgai {
              display: inline-block;
              position: relative;
              .plus {
                width: 55px;
                position: absolute;
                left: 120px;
                top: -1px;
                border: 1px solid #fff;
                font-size: 15px;
                padding: 1px 7px;
                cursor: pointer;
                color: #fff;
                font-size: 14px;
                background: #ad0002;
              }
            }
            .address {
              // width: 280px;
              display: flex;
              flex-wrap: wrap;
              // position: relative
              .grid {
                width: 280px;
                border: 1px solid #ccc;
                margin: 10px;
                padding: 10px;
                overflow: hidden;
                position: relative;
                p {
                  line-height: 25px;
                  padding: 0;
                  margin: 0;
                }
                .tool {
                  .edit {
                    position: absolute;
                    top: 4px;
                    right: 4px;
                    cursor: pointer;
                  }
                  .del {
                    position: absolute;
                    bottom: 4px;
                    right: 4px;
                    display: block;
                    width: 20px;
                    height: 20px;
                    cursor: pointer;
                    img {
                      width: 100%;
                      height: 100%;
                    }
                  }
                }
              }

              .model_box {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgb(0, 0, 0, 0.5);
              }
              .addEd {
                // width: 500px;
                // height: 300px;
                padding: 20px;
                background-color: #fff;
                position: absolute;
                top: 42%;
                left: 65%;
                margin-top: -150px;
                margin-left: -250px;
                p {
                  padding: 10px 0;
                }
                input {
                  width: 200px;
                  outline: none;
                  height: 30px;
                }
                .closebtn {
                  position: absolute;
                  top: 3px;
                  right: 3px;
                  width: 20px;
                  height: 20px;
                  cursor: pointer;
                  color: #fff;
                  display: block;
                  border-radius: 50%;
                  img {
                    width: 100%;
                    height: 100%;
                  }
                }
              }
            }
            .log_add {
              line-height: 125px;
              cursor: pointer;
            }
          }
        }
      }
    }
  }

  // 全部订单
  .carttitle {
    display: flex;
    justify-content: flex-start;
    border-bottom: 1px solid #ccc;
    margin: auto;
    padding: 0;
    li {
      padding-left: 10px;
      // width: 20%;
      width: 200px;
      text-align: center;
      font-size: 19px;
      line-height: 40px;
      color: #333;
      font-weight: 600;
    }
  }
  .all_paid {
    padding: 10px 0;
    border-bottom: 1px #ddd solid;
    .all_message {
      display: flex;
      justify-content: flex-start;
      & > div {
        padding-left: 55px;
        box-sizing: border-box;
      }
      .all_img {
        height: 120px;
        img {
          width: 120px;
          height: 110px;
        }
      }
      .message_title {
        width: 288px;
        padding-left: 72px;
        .message_name {
          font-size: 16px;
          color: #333;
          padding: 5px 39px 5px 0;
        }
        .message_price {
          padding: 5px 0;
        }
      }
      .state {
        text-align: center;
        font-size: 19px;
        font-weight: bold;
      }
      // .total {
      //   padding-left: 35px;
      //   width: 20%;
      //   font-size: 20px;
      //   span {
      //     color: #ad0002;
      //     font-weight: bold;
      //   }
      // }
    }
  }
  // 待支付
  .carttitles {
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid #ccc;
    margin: auto;
    padding: 0;
    li {
      width: 33.333%;
      font-size: 19px;
      line-height: 40px;
      color: #333;
      font-weight: 600;
      padding-left: 66px;
    }
    // .one{
    // }
  }
  .be_paid {
    display: flex;
    .paid_img {
      height: 120px;
      img {
        width: 110px;
        height: 120px;
      }
    }
    .paid_title {
      width: 288px;
      padding-left: 72px;
      .caption {
        font-size: 16px;
        color: #333;
        padding: 5px 39px 5px 0;
      }
      .message_price {
        padding: 10px 0;
      }
    }
    .el-button {
      background-color: #ad0002;
      color: #fff;
    }

    .button_box {
      line-height: 100%;
      font-size: 19px;
      font-weight: bold;
      padding-right: 80px;
      .button_ok {
        display: block;
      }
    }
    .button_del {
      padding: 12px 34px;
      margin: 10px 0 0 0;
    }
  }

  //待发货
  .await {
    .await-box {
      display: flex;
      align-items: center;
      .await_paid {
        width: 140px;
        height: 140px;
        margin-right: 50px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .await_title {
        width: 220px;
        font-size: 20px;
        font-weight: bold;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
      }
    }
  }
}
::v-deep {
  .el-tabs__item {
    font-size: 20px;
    font-weight: 600;
  }
  .el-tabs--border-card
    > .el-tabs__header
    .el-tabs__item:not(.is-disabled):hover {
    color: #ad0002;
  }
  .el-tabs__nav {
    display: flex;
    float: none;
  }
  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    color: #ad0002;
    background: #f5f7fa;
  }
  .el-tabs--border-card > .el-tabs__header .el-tabs__item {
    width: 200px;
    text-align: center;
    flex: 1;
  }
  .el-tabs--border-card {
    border: 0;
    box-shadow: none;
  }
}
</style>